import React, { useState, useEffect, useRef } from 'react'
import HeaderNav from "@/components/header-nav"
import FooterNav from "@/components/footer-nav"
import { SideBar } from 'antd-mobile'
import RefreshScroll from "@/components/refresh-scroll"
import ItemCrad from "../components/itemCrad"
import styles from "./index.module.less"
import { NavBar, List, Avatar, TabBar, JumboTabs } from 'antd-mobile';
import withRefreshOnListRoute from './withRefreshOnListRoute.js';
import {
  HomeOutlined,
  GlobalOutlined,
  MessageOutlined,
  UserOutlined
} from '@ant-design/icons';
const { getClassify, getClassifyGoods } = $globalServicer('Classify')
import ChatListItem from './components/chatListItem/index'
import RoleItem from './components/roleItem/index'
import TemplateList from './components/TemplateList/index'
import { useSearchParams } from 'react-router-dom';

const Classify = () => {
  const [isReadLoad, setReadLoad] = useState(true) // 页面是否处于重新加载
  const [hasMore, setHasMore] = useState(true)
  const [activeKey, setActiveKey] = useState('conversations')
  const [dataList, setDatalist] = useState([])
  const customNavigate = $globalNavigate()
  const [params] = useSearchParams();
  const tabType = params.get('tabType');
  useEffect(() => {
    if (tabType) {
      setActiveKey(tabType)
    }
  }, [tabType])

  return (
    <div className={styles.chatWrapper}>
      {/* <div className="header">
                <HeaderNav title="分类" backArrow={false}></HeaderNav>
            </div>
            <div className="content">
                <iframe src={iframeSrc} className={styles.content_warp} id="myIframe" ref={iframeRef} />
                <div className={styles.content_warp}>
                    <div className={styles.content_left}>
                        {classifyList.length ? <SideBar style={{ '--background-color': 'var(--theme-bg-card)' }} activeKey={activeKey} onChange={changeClass}>
                            {classifyList.map((item) => (
                                <SideBar.Item key={item.id} title={item.classifyName} />
                            ))}
                        </SideBar> : ''}
                    </div>
                    <div className={styles.content_right}>
                        <RefreshScroll onRefresh={getRefresh} loadMore={getLoad} hasMore={hasMore} isReadLoad={isReadLoad}>
                            <div className={styles.item_list}>
                                {dataList.map((item, index) => (
                                    <ItemCrad img={item.img} name={item.name} price={item.price} key={`item_${index}`}></ItemCrad>
                                ))}
                            </div>
                        </RefreshScroll>
                    </div>
               </div>
            </div> */}
      <div className={styles.content}>
        {/* <NavBar backArrow={false}>
          <span style={{ marginRight: 16 }}>对话</span>
          <span>我的角色</span>
          <span style={{ marginLeft: 16 }}>预设</span>
        </NavBar> */}
        <div className="header">
          <JumboTabs activeKey={activeKey} onChange={(key) => setActiveKey(key)}>
            <JumboTabs.Tab title='对话' key='conversations'>
            </JumboTabs.Tab>
            <JumboTabs.Tab title='我的角色' key='roles'>
            </JumboTabs.Tab>
            {/* <JumboTabs.Tab title='预设' key='preinstall'>
            </JumboTabs.Tab> */}
          </JumboTabs>
        </div>
        <div className={styles.chatContent}>
          {
            activeKey === 'conversations' && <ChatListItem tabType={activeKey}/> 
          }
          {
            activeKey  === 'roles' && <RoleItem tabType={activeKey}/>
          }
          {/* {
            activeKey === 'preinstall' && <TemplateList tabType={activeKey}></TemplateList>
          } */}
          {/* <List style={{ flex: 1, overflow: 'auto' }}>
            {chats.map(chat => (
              <List.Item
                key={chat.id}
                prefix={<Avatar src={chat.avatar} />}
                description={chat.message}
                extra={<span>🗑️</span>}
                onClick={() => customNavigate('/chatDetail/', { chatid: chat.id })}
              >
                {chat.name}
              </List.Item>
            ))}
          </List> */}
        </div>
      </div>
      <div className="footer">
        <FooterNav></FooterNav>
      </div>
    </div>
  );
};

export default withRefreshOnListRoute(Classify);
